<template>
  <el-dialog
    top="10vh"
    fullscreen
    title="添加/编辑楼盘"
    :visible.sync="dialogValue"
    :close-on-click-modal="false"
    append-to-body
  >
    <SubmitForm
        labelPosition="right"
        labelWidth="120px"
        :rule-form="ruleForm"
        :rules="rules"
        :form-list="formList"
        @change="handleFormChange"
        @save="onSave"
        @close="dialogValue = false"
    >
      <template #map>
        <el-button type="primary" @click="openMap">地图选择</el-button>
      </template>
      <template v-slot:district>
        <el-cascader
          style="width: 300px"
          ref="districtRef"
          v-model="ruleForm.district"
          :options="options"
          :props="{ value: 'id', label: 'name', children: 'children' }"
          @change="val => handleFormChange({ key: 'district', val })"
          clearable
        ></el-cascader>
      </template>
    </SubmitForm>


    <MapSelector @save="handleLocationSave" ref="mapSelector" />
  </el-dialog>
</template>

<script>
import {http} from '@/api'
import MapSelector from "../map.vue";

export default {
  name: 'FormAdd',
  components: { MapSelector },
  data() {
    return {
      apiKey: 'officeBuildingTemplate',
      dialogValue: false,
      ruleForm: {},
      defaultForm: {
        building_name: '',
        publish_type: '',
        building_type: '',
        rent_type: '',
        property_nature: '',
        facilities: [],
        tags: [],
        district: [],
        district_label: '',
        address: '',
        lng: '',
        lat: '',
        total_floors: '',
        efficiency: '',
        post_url: '',
        rental_area_max: '',
        rental_area_min: '',
        price_type: '',
        price_min: '',
        price_max: '',
        day_price: '',
        developer: '',
        property_company: '',
        property_fee: 0,
        ac_fee: '',
        electricity_fee: 0,
        parking_fee: 0,
        subway_info: '',
        bus_info: '',
        commercial_facilities: '',
        hotel_facilities: '',
        administrative_facilities: '',
        project_facilities: ''
      },
      rules: {
        building_name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        publish_type: [{ required: true, message: '请选择发布类型', trigger: 'change' }],
        building_type: [{ required: true, message: '请选择写字楼类型', trigger: 'blur' }],
        rent_type: [{ required: true, message: '请选择租售方式', trigger: 'change' }],
        address: [{ required: true, message: '请输入写字楼地址', trigger: 'blur' }],
        district: [{ required: true, message: '请选择区域板块', trigger: 'change' }],
        post_url: [{ required: true, message: '请上传封面', trigger: 'change' }],
      },
      formList: [
        {
          label: '项目名称',
          prop: 'building_name',
          name: 'input',
          clearable: true,
          colSpan: 24,
          width: '100%'
        },
        {
          label: '封面',
          prop: 'post_url',
          name: 'file',
          clearable: true,
          colSpan: 24
        },
        {
          label: '轮播图',
          prop: 'image_url',
          name: 'file',
          clearable: true,
          multiple: true,
          colSpan: 24
        },
        {
          label: '视频',
          prop: 'video_url',
          name: 'file_video',
          clearable: true,
          multiple: false,
          colSpan: 24
        },
        {
          label: '发布类型',
          prop: 'publish_type',
          name: 'radio',
          colSpan: 24,
          options: [
            { label: '传统写字楼', value: '传统写字楼' },
            { label: '联合办公', value: '联合办公' }
          ]
        },
        {
          label: '写字楼类型',
          prop: 'building_type',
          name: 'radio',
          colSpan: 24,
          options: [
            { label: '纯写字楼', value: '纯写字楼' },
            { label: '商业综合体', value: '商业综合体' },
            { label: '商务公寓', value: '商务公寓' },
            { label: '商务酒店', value: '商务酒店' },
            { label: '产业园区', value: '产业园区' }
          ]
        },
        {
          label: '租售方式',
          prop: 'rent_type',
          name: 'radio',
          colSpan: 24,
          options: [
            { label: '出租', value: '出租' },
            { label: '出售', value: '出售' }
          ]
        },
        {
          label: '写字楼性质',
          prop: 'property_nature',
          name: 'radio',
          colSpan: 24,
          options: [
            { label: '新房', value: '新房' },
            { label: '二手房', value: '二手房' }
          ]
        },
        {
          label: '配套设施',
          prop: 'facilities',
          name: 'checkbox',
          colSpan: 24,
          options: [
            { label: '水', value: '水' },
            { label: '电', value: '电' },
            { label: '电梯', value: '电梯' },
            { label: '暖气', value: '暖气' },
            { label: '宽带', value: '宽带' },
            { label: '电话', value: '电话' },
            { label: '中央空调', value: '中央空调' },
            { label: '办公家具', value: '办公家具' },
            { label: '免费车位', value: '免费车位' },
            { label: '员工餐厅', value: '员工餐厅' },
            { label: '安全监控', value: '安全监控' }
          ]
        },
        {
          label: '房源标签',
          prop: 'tags',
          name: 'checkbox',
          colSpan: 24,
          options: [
            { label: '价格可面议', value: '价格可面议' },
            { label: '转让费可面议', value: '转让费可面议' },
            { label: '随时入驻', value: '随时入驻' },
            { label: '随时看房', value: '随时看房' },
            { label: '租金含物业费', value: '租金含物业费' },
            { label: '租金含空调费', value: '租金含空调费' },
            { label: '租金含发票', value: '租金含发票' }
          ]
        },

        {
          label: '区域板块',
          prop: 'district',
          name: 'input',
          clearable: true,
          slot: true,
          colSpan: 24
        },
        {
          label: '写字楼地址',
          prop: 'address',
          name: 'input',
          type: 'textarea',
          width: '50%',
          clearable: true,
          colSpan: 24,
          disabled: true
        },
        {
          prop: 'map',
          label: '',
          slot: true,
          colSpan: 24
        },
        {
          prop: '详情',
          label: '详情',
          name: 'title',
          colSpan: 24
        },
        {
          label: '日租金',
          prop: 'day_price',
          name: 'input',
          type: 'number',
          clearable: true,
          colSpan: 12,
          append: '元/㎡/天'
        },
        {
          label: '租金类别',
          prop: 'price_type',
          name: 'radio',
          colSpan: 12,
          options: [
            { label: '净租金', value: '净租金' },
            { label: '含税', value: '含税' }
          ]
        },
        {
          label: '面积最小',
          prop: 'rental_area_min',
          name: 'input',
          clearable: true,
          colSpan: 12,
          append: '㎡'
        },
        {
          label: '面积最大',
          prop: 'rental_area_max',
          name: 'input',
          clearable: true,
          colSpan: 12,
          append: '㎡'
        },
        {
          label: '月租金最小',
          prop: 'price_min',
          name: 'input',
          type: 'number',
          clearable: true,
          colSpan: 12,
          append: '元/月',
          disabled: true
        },
        {
          label: '月租金最大',
          prop: 'price_max',
          name: 'input',
          type: 'number',
          clearable: true,
          colSpan: 12,
          append: '元/月',
          disabled: true
        },
        {
          label: '总楼层',
          prop: 'total_floors',
          name: 'number',
          clearable: true,
          colSpan: 12
        },
        {
          label: '得房率（%）',
          prop: 'efficiency',
          name: 'number',
          clearable: true,
          colSpan: 12,
          step: 0.01,
          precision: 2
        },

        {
          label: '开发商',
          prop: 'developer',
          name: 'input',
          clearable: true,
          colSpan: 12
        },
        {
          label: '物业公司',
          prop: 'property_company',
          name: 'input',
          clearable: true,
          colSpan: 12
        },
        {
          label: '物业费',
          prop: 'property_fee',
          name: 'input',
          type: 'number',
          clearable: true,
          colSpan: 12,
          append: '元/㎡/天'
        },
        {
          label: '空调费',
          prop: 'ac_fee',
          name: 'input',
          clearable: true,
          colSpan: 12,
        },
        {
          label: '电费',
          prop: 'electricity_fee',
          name: 'input',
          type: 'number',
          clearable: true,
          colSpan: 12,
          append: '元/度'
        },
        {
          label: '停车费',
          prop: 'parking_fee',
          name: 'input',
          type: 'number',
          clearable: true,
          colSpan: 12,
          append: '元/月/辆'
        },
        {
          label: '地铁信息',
          prop: 'subway_info',
          name: 'input',
          type: 'textarea',
          clearable: true,
          colSpan: 24,
          width: '500px',
          rows: 3,
          placeholder: '使用；表示换行显示，使用，表示不换行，例如：地铁M4号线埠西站B口直达；地铁M3号线李村站，M2号线香港中路站'
        },
        {
          label: '公交信息',
          prop: 'bus_info',
          name: 'input',
          type: 'textarea',
          clearable: true,
          colSpan: 24,
          width: '500px',
          rows: 3,
          placeholder: '使用；表示换行显示，使用，表示不换行，例如：周边3个公交站点，埠西站直达；40多条公交线，覆盖全城'
        },
        {
          label: '商超配套',
          prop: 'commercial_facilities',
          name: 'input',
          type: 'textarea',
          clearable: true,
          colSpan: 24,
          width: '500px',
          rows: 3,
          placeholder: '使用；表示换行显示，使用，表示不换行，例如：丽达mall，埠西市场；万象汇，宜家家居；利群商厦'
        },
        {
          label: '酒店配套',
          prop: 'hotel_facilities',
          name: 'input',
          type: 'textarea',
          clearable: true,
          colSpan: 24,
          width: '500px',
          rows: 3,
          placeholder: '使用；表示换行显示，使用，表示不换行，例如：桔子水晶，凯悦酒店；香格里拉，威斯汀酒店'
        },
        {
          label: '行政配套',
          prop: 'administrative_facilities',
          name: 'input',
          type: 'textarea',
          clearable: true,
          colSpan: 24,
          width: '500px',
          rows: 3,
          placeholder: '使用；表示换行显示，使用，表示不换行，例如：距市北CBD商务区约10分钟车程，距金狮广场约5分钟车程；距乐客城约15分钟车程，距五四广场约15分钟车程'
        },
        {
          label: '项目配套',
          prop: 'project_facilities',
          name: 'input',
          type: 'textarea',
          clearable: true,
          colSpan: 24,
          width: '500px',
          rows: 3,
          placeholder: '使用；表示换行显示，使用，表示不换行，例如：顶级奢华大堂，产品自带底商；开放式咖啡吧，礼宾大屏；星级茶室，共享会议室'
        },
      ],
      options: []
    }
  },
  methods: {
    openMap() {
      if (!this.ruleForm.district.length) {
        this.$message.error('请先选择区域板块')
        return
      }
      // 如果已有经纬度，传入现有位置信息
      let district = this.ruleForm.district_label.split('/')
      const location = this.ruleForm.lat && this.ruleForm.lng ? {
        lat: this.ruleForm.lat,
        lng: this.ruleForm.lng,
        address: this.ruleForm.address || `${district[0] || ''}${district[1] || ''}${district[2] || ''}`,
      } : {
        address: `${district[0] || ''}${district[1] || ''}${district[2] || ''}`
      };
      this.$refs.mapSelector.open({
        ...location,
      })
    },
    handleLocationSave(locationData) {
      this.ruleForm.lat = locationData.lat
      this.ruleForm.lng = locationData.lng
      this.ruleForm.address = locationData.formatted_address
    },
    handleFormChange({ key, val }) {
      if (key === 'district') {
        let node = this.$refs.districtRef.getCheckedNodes()[0] || { pathLabels: [] }
        this.ruleForm.district_label = node.pathLabels.join('/')
        this.ruleForm.address = ''
      }
      if (key === 'day_price') {
        // 根据平方计算月租金
        this.ruleForm.price_min = (Number(val) * 365 / 12 * Number(this.ruleForm.rental_area_min)).toFixed(2)
        this.ruleForm.price_max = (Number(val) * 365 / 12 * Number(this.ruleForm.rental_area_max)).toFixed(2)
      }
      if (key === 'rental_area_min') {
        this.ruleForm.price_min = (Number(this.ruleForm.day_price) * 365 / 12 * Number(this.ruleForm.rental_area_min)).toFixed(2)
        this.ruleForm.price_max = (Number(this.ruleForm.day_price) * 365 / 12 * Number(this.ruleForm.rental_area_max)).toFixed(2)
      }
    },
    open(row) {
      this.dialogValue = true
      http.district.tree().then(res => {
        this.options = res.data
      })
      if (row) {
        http[this.apiKey].read(row.id).then(res => {
          this.ruleForm = {
            ...res.data,
            facilities: (res.data.facilities || '').split(','),
            tags:  (res.data.tags || '').split(','),
          }
        })
      } else {
        this.ruleForm = { ...this.defaultForm }
      }
    },
    async onSave() {
      const data = {
        ...this.ruleForm,
        facilities: this.ruleForm.facilities.join(','),
        tags: this.ruleForm.tags.join(',')
      };

      if (this.ruleForm.id) {
        await http[this.apiKey].update(this.ruleForm.id, data)
      } else {
        await http[this.apiKey].create('',data)
      }
      this.$emit('get-page')
      this.dialogValue = false
      this.$message.success('保存成功')
    }
  }
}
</script>

<style scoped lang="scss">
</style>
